<div class="content-section introduction">
    <div>
        <span class="feature-title">AutoComplete</span>
        <span>AutoComplete is an input component that provides real-time suggestions when being typed.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Basic</h3>
    <p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
        placeholder="Countries" [minLength]="1"></p-autoComplete>
    <span style="margin-left:10px">Country: {{country ? country.name||country : 'none'}}</span>
    
    <h3>Advanced</h3>
    <p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
        [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true" (onDropdownClick)="handleDropdownClick()">
        <ng-template let-brand pTemplate="item">
            <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
                <img src="assets/showcase/images/demo/car/{{brand}}.png" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
                <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
            </div>
        </ng-template>
    </p-autoComplete>
    <span style="margin-left:50px">Brand: {{brand||'none'}}</span>
    
    <h3>Multiple</h3>
    <p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
        [minLength]="1" placeholder="Countries" field="name" [multiple]="true">
    </p-autoComplete>
    <ul>
        <li *ngFor="let c of countries">{{c.name}}</li>
    </ul>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;AutoCompleteModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>AutoComplete uses ngModel for two-way binding, requires a list of suggestions and a completeMethod to query for the results. The completeMethod
            gets the query text as event.query property and should update the suggestions with the search results.</p>     
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"&gt;&lt;/p-autoComplete&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class AutoCompleteDemo &#123;
    
    text: string;
    
    results: string[];
    
    search(event) &#123;
        this.mylookupservice.getResults(event.query).then(data => &#123;
            this.results = data;
        &#125;);
    &#125;
    
&#125;
</code>
</pre>

            <h3>Change Detection</h3>
            <p>AutoComplete either uses setter based checking or ngDoCheck to realize if the suggestions has changed to update the UI. This is configured using the immutable
                property, when enabled (default) setter based detection is utilized so your changes such as adding or removing a record 
                should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change. 
                For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item. On the other hand, setting immutable property to false removes
                this restriction by using ngDoCheck with IterableDiffers to listen changes without the need to create a new reference of data. Setter based method is faster however
                both methods can be used depending on your preference.
            </p>

            <h3>Model Driven Forms</h3>
            <p>AutoComplete can be used in a model driven form as well.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-autoComplete formControlName="city" [suggestions]="results" (completeMethod)="search($event)"&gt;&lt;/p-autoComplete&gt;
</code>
</pre>

            <h3>Dropdown</h3>
            <p>Enabling dropdown property displays a button next to the input field, implementation by default does nothing and you can use
                the dropdown for cases like displaying all results. onDropdownClick is triggered when the button is clicked.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)" 
            [dropdown]="true" (onDropdownClick)="handleDropdown(event)"&gt;&lt;/p-autoComplete&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class AutoCompleteDemo &#123;
    
    text: string;
    
    results: string[];
    
    search(event) &#123;
        this.mylookupservice.getResults(event.query).then(data => &#123;
            this.results = data;
        &#125;);
    &#125;
    
    handleDropdown(event) &#123;
        //event.query = current value in input field
    &#125;
    
&#125;
</code>
</pre>

            <h3>Multiple Selection</h3>
            <p>Multiple mode is used to select more than one value from the autocomplete. In this case, model reference should be an array.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-autoComplete [(ngModel)]="texts" [suggestions]="results" (completeMethod)="search($event)" [multiple]="true"&gt;&lt;/p-autoComplete&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class AutoCompleteDemo &#123;
    
    texts: string[];
    
    results: string[];
    
    search(event) &#123;
        this.mylookupservice.getResults(event.query).then(data => &#123;
            this.results = data;
        &#125;);
    &#125;
    
&#125;
</code>
</pre>

            <h3>Objects</h3>
            <p>AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. The value passed to the model would still be the
            object instance of a suggestion. Here is an example with a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name"&gt;&lt;/p-autoComplete&gt;
</code>
</pre>
    
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class AutoCompleteDemo &#123;
    
    val: country;
    
    results: country[];
    
    search(event) &#123;
        this.countrylookupservice.getResults(event.query).then(data => &#123;
            this.results = data;
        &#125;);
    &#125;
    
&#125;
</code>
</pre>
    
            <h3>Templating</h3>
            <p>Item ng-template allows displaying custom content inside the suggestions panel. The local ng-template variable passed to the ng-template is an object in the suggestions array.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)"&gt;
    &lt;ng-template let-brand pTemplate="item"&gt;
        &lt;div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5"&gt;
            &lt;img src="assets/showcase/images/demo/car/{{brand}}.png" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/&gt;
            &lt;div style="font-size:18px;float:right;margin:10px 10px 0 0"&gt;&#123;&#123;brand&#125;&#125;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-autoComplete&gt;
</code>
</pre>

            <p>In multiple mode, selected item can be customized using selectedItem ng-template.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-autoComplete [(ngModel)]="texts" [suggestions]="results" (completeMethod)="search($event)" [multiple]="true"&gt;
    &lt;ng-template let-value pTemplate="selectedItem"&gt;
        &lt;span style="font-size:18px"&gt;&gt;&#123;&#123;value&#125;&#125;&lt;&lt;/span&gt;
    &lt;/ng-template&gt;
&lt;/p-autoComplete&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>suggestions</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of suggestions to display.</td>
                        </tr>
                        <tr>
                            <td>field</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Field of a suggested object to resolve and display.</td>
                        </tr>
                        <tr>
                            <td>scrollHeight</td>
                            <td>string</td>
                            <td>200px</td>
                            <td>Maximum height of the suggestions panel.</td>
                        </tr>
                        <tr>
                            <td>dropdown</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Displays a button next to the input field when enabled.</td>
                        </tr>
                        <tr>
                            <td>multiple</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Specifies if multiple values can be selected.</td>
                        </tr>
                        <tr>
                            <td>minLength</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Minimum number of characters to initiate a search.</td>
                        </tr>
                        <tr>
                            <td>delay</td>
                            <td>number</td>
                            <td>300</td>
                            <td>Delay between keystrokes to wait before sending a query.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>inputStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputId</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Identifier of the focus input to match a label defined for the component.</td>
                        </tr>
                        <tr>
                            <td>placeholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Hint text for the input field.</td>
                        </tr>
                        <tr>
                            <td>readonly</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the input cannot be typed.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the component should be disabled.</td>
                        </tr>
                        <tr>
                            <td>maxlength</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum number of character allows in the input field.</td>
                        </tr>
                        <tr>
                            <td>size</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Size of the input field.</td>
                        </tr>
                        <tr>
                            <td>appendTo</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>dataKey</td>
                            <td>string</td>
                            <td>null</td>
                            <td>A property to uniquely identify a value in options.</td>
                        </tr>
                        <tr>
                            <td>autoHighlight</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, highlights the first item in the list by default.</td>
                        </tr>
                        <tr>
                            <td>type</td>
                            <td>string</td>
                            <td>text</td>
                            <td>Type of the input, defaults to "text".</td>
                        </tr>
                        <tr>
                            <td>emptyMessage</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Message to display when there are no results for a query.</td>
                        </tr>
                        <tr>
                            <td>immutable</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Defines how the suggestions should be manipulated.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>completeMethod</td>
                            <td>
                                event.originalEvent: browser event <br>
                                event.query: Value to search with
                            </td>
                            <td>Callback to invoke to search for suggestions.</td>
                        </tr>
                        <tr>
                            <td>onFocus</td>
                            <td>event: Browser event</td>
                            <td>Callback to invoke when autocomplete gets focus.</td>
                        </tr>   
                        <tr>
                            <td>onBlur</td>
                            <td>event: Browser event</td>
                            <td>Callback to invoke when autocomplete loses focus.</td>
                        </tr>                        
                        <tr>
                            <td>onSelect</td>
                            <td>
                                value: Selected value
                            </td>
                            <td>Callback to invoke when a suggestion is selected.</td>
                        </tr>
                        <tr>
                            <td>onUnselect</td>
                            <td>
                                value: Unselected value in multiple mode
                            </td>
                            <td>Callback to invoke when a selected value is removed.</td>
                        </tr>
                        <tr>
                            <td>onDropdownClick</td>
                            <td>
                                event.originalEvent: browser event <br>
                                event.query: Current value of the input field
                            </td>
                            <td>Callback to invoke to when dropdown button is clicked.</td>
                        </tr>
                        <tr>
                            <td>onClear</td>
                            <td>event: browser event</td>
                            <td>Callback to invoke to when inpu field is cleared.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-autocomplete</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>ui-autocomplete-panel</td>
                            <td>Overlay panel of suggestions.</td>
                        </tr>
                        <tr>
                            <td>ui-autocomplete-items</td>
                            <td>List container of suggestions.</td>
                        </tr>
                        <tr>
                            <td>ui-autocomplete-item</td>
                            <td>List item of a suggestion.</td>
                        </tr>
                        <tr>
                            <td>ui-autocomplete-token</td>
                            <td>Element of a selected item in multiple mode.</td>
                        </tr>
                        <tr>
                            <td>ui-autocomplete-token-icon</td>
                            <td>Close icon element of a selected item in multiple mode.</td>
                        </tr>
                        <tr>
                            <td>ui-autocomplete-token-label</td>
                            <td>Label of a selected item in multiple mode.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/autocomplete" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
    placeholder="Countries" [minLength]="1"&gt;&lt;/p-autoComplete&gt;
&lt;span style="margin-left:10px"&gt;Country: {{country ? country.name||country : 'none'}}&lt;/span&gt;

&lt;h3&gt;Advanced&lt;/h3&gt;
&lt;p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
    [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true" (onDropdownClick)="handleDropdownClick($event)"&gt;
    &lt;ng-template let-brand pTemplate="item"&gt;
        &lt;div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5"&gt;
            &lt;img src="assets/showcase/images/demo/car/{{brand}}.png" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/&gt;
            &lt;div style="font-size:18px;float:right;margin:10px 10px 0 0"&gt;{{brand}}&lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-autoComplete&gt;
&lt;span style="margin-left:50px"&gt;Brand: {{brand||'none'}}&lt;/span&gt;

&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
    [minLength]="1" placeholder="Countries" field="name" [multiple]="true"&gt;
&lt;/p-autoComplete&gt;
&lt;ul&gt;
    &lt;li *ngFor="let c of countries"&gt;{{c.name}}&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class AutoCompleteDemo &#123;

    country: any;
    
    countries: any[];
        
    filteredCountriesSingle: any[];
    
    filteredCountriesMultiple: any[];
    
    brands: string[] = ['Audi','BMW','Fiat','Ford','Honda','Jaguar','Mercedes','Renault','Volvo','VW'];
    
    filteredBrands: any[];
    
    brand: string;
    
    constructor(private countryService: CountryService) &#123; &#125;
    
    filterCountrySingle(event) &#123;
        let query = event.query;        
        this.countryService.getCountries().then(countries => &#123;
            this.filteredCountriesSingle = this.filterCountry(query, countries);
        &#125;);
    &#125;
    
    filterCountryMultiple(event) &#123;
        let query = event.query;
        this.countryService.getCountries().then(countries => &#123;
            this.filteredCountriesMultiple = this.filterCountry(query, countries);
        &#125;);
    &#125;
    
    filterCountry(query, countries: any[]):any[] &#123;
        //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
        let filtered : any[] = [];
        for(let i = 0; i < countries.length; i++) &#123;
            let country = countries[i];
            if(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) &#123;
                filtered.push(country);
            &#125;
        &#125;
        return filtered;
    &#125;
        
    filterBrands(event) &#123;
        this.filteredBrands = [];
        for(let i = 0; i < this.brands.length; i++) &#123;
            let brand = this.brands[i];
            if(brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) &#123;
                this.filteredBrands.push(brand);
            &#125;
        &#125;
    &#125;
    
    handleDropdownClick() &#123;
        this.filteredBrands = [];
        
        //mimic remote call
        setTimeout(() => &#123;
            this.filteredBrands = this.brands;
        &#125;, 100)
    &#125;
&#125;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
@Injectable()
export class CountryService &#123;
    
    constructor(private http: Http) &#123;&#125;

    getCountries() &#123;
        return this.http.get('showcase/resources/data/countries.json')
                    .toPromise()
                    .then(res => &lt;any[]&gt; res.json().data)
                    .then(data => &#123; return data; &#125;);
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
